<template>
    <div class="my-banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in banners" :key="item.id">
                <img :src="item.i" :alt="item.id">
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { recommend } from '@/api';
export default {
    data() {
        return {
            banners: [
                // {
                //     "i": "http://p1.music.126.net/CqkNSIc-fK1SRvx_Q33OCg==/109951169982558278.jpg",
                //     "id": 0,
                // },
                // {
                //     "i": "http://p1.music.126.net/CqkNSIc-fK1SRvx_Q33OCg==/109951169982558278.jpg",
                //     "id": 0,
                // },
            ]
        }
    },

    methods: {
        async getRecommand() {
            await recommend()
                .then(
                    content => {
                        // console.log('--->', content)
                        let { state, result: { banner }  } = content;
                        // console.log(banner);
                        
                        if (state == "success") {
                            // 映射新数组
                            this.banners = banner.map((item, index) => {
                                item.id = index;
                                // console.log(item);
                                return item;
                            });
                            // console.log(this.banners);
                        }
                    }
                )
                .catch(
                    err => {
                        console.log("请求失败", err);
                    }
                )
        }
    },

    // 初始化
    created() {
        this.getRecommand();
    }
}

</script>

<style lang="less" scoped>
@import url(../common/less/varible.less);

.my-banner {
    img {
        width: 100%;
        // margin: 0 auto;
        // height: 100px;
        vertical-align: middle;
    }
}

.my-swipe .van-swipe-item {
    text-align: center;
}
</style>